<template>
  <a-modal
    title="角色管理"
    :width="450"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-alert
        v-if="alertVisable"
        showIcon
        banner
        message="保存校色信息失败,请信息是否填写正确"
        type="error"
        closable
        @close="alertOnClose"
      />
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24">
            <!-- 角色名称 RoleName -->
            <a-row>
              <a-col :span="24">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="角色名称"
                >
                  <a-input-search
                    placeholder="角色名称"
                    v-decorator="['roleName', {rules: [{ required: true, message: '请输入角色名称' }]}]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 其他信息 memo -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="其他信息"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-textarea :rows="4" v-decorator="['memo', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveRoleInfo, getRoleInfo } from './roleapi'

export default {
  name: 'RoleModal',
  props: {
  },
  data () {
    return {
      dateFormat: 'YYYY-MM-DD',
      alertVisable: false, // 错误提示框
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      role: {
        sysSeq: 0,
        pid: ''
      },
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
  },
  methods: {
    // 得到时间控件时间
    onChangeDate1 (date, dateString) {
      this.person.personBirthday = dateString
    },
    getBirthdayDate () {
      if (this.departmentMemberInfo.personBirthday) {
        // return moment(this.departmentMemberInfo.personBirthday, 'YYYY-MM-DD')
      } else {
        // return null
      }
    },
    // 关闭提示
    alertOnClose () {
      this.alertVisable = false
    },
    showAddModal () {
      this.role = {
        sysSeq: 0,
        pid: ''
      }
      this.visible = true
    },
    showEditModal (pid) {
      console.log(pid)
      if (pid) {
        this.confirmLoading = true
        getRoleInfo(pid, {})
          .then(res => {
            if (res.code === 'C1') {
              this.role.sysSeq = res.data.sysSeq
              this.role.pid = res.data.pid
              this.form.setFieldsValue(res.data)
              this.confirmLoading = false
            }
          })
      }
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          _this.confirmLoading = true
          new Promise((resolve) => {
            resolve(saveRoleInfo(Object.assign(_this.role, values), {}))
          }).then((res) => {
            if (res.code === 'C1') {
              _this.$message.success('保存成功')
              _this.close()
            } else {
              _this.alertVisable = true
            }
            // Do something
            _this.confirmLoading = false
            // _this.$emit('ok')
          }).catch(() => {
            // Do something
          }).finally(() => {
            _this.role = {
              sysSeq: 0,
              pid: '' // 主键
            }
          })
        }
      })
    },
    handleCancel () {
      this.close()
    }

  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
